<template>
  <div class="footer-bar">
    <div class="footer-bg">
      <div class="w1200 footer-about clearfix">
        <ul>
          <h5>关于</h5>
          <li><a href="javascript:;">关于我们</a></li>
          <li><a href="javascript:;">加入我们</a></li>
          <li><a href="javascript:;">团队</a></li>
        </ul>
        <ul>
          <h5>服务</h5>
          <li><a href="javascript:;">服务条款</a></li>
          <li><a href="javascript:;">隐私协议</a></li>
        </ul>
        <ul>
          <h5>产品</h5>
          <li><a href="javascript:;">如何使用</a></li>
          <li><a href="javascript:;">视频介绍</a></li>
          <li><a href="javascript:;">更新历史</a></li>
          <li><a href="javascript:;">FAQ</a></li>
        </ul>
        <div class="we">
          <h5>关注我们</h5>
          <p class="icons">
            <a href="javascript:;"><img src="../assets/ym-footer/icon-wb.png" /></a>
            <a href="javascript:;"><img src="../assets/ym-footer/icon-wx.png" /></a>
            <a href="javascript:;"><img src="../assets/ym-footer/icon-qq.png" /></a>
          </p>
          <p class="text">鹰目户外广告网是中国最大的户外广告投放平台，户外媒体行业服务平台。鹰目网秉承以 “为客户提供有价值的服务” 为宗旨，围绕 “做专” “做专业” “做精细” 的服务方针，坚持 “只做服务商” 的经营理念，致力于以顾问形式，服务于户外广告买卖双方。</p>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="w1200">
        <div class="copyright">
          <p>
            <span>Copyright © 2012-2017</span>
            <span>北京鹰目网络科技有限公司</span>
            <span>京ICP备14044439号-1</span>
            <img src="../assets/ym-footer/icon-g.png" />
            <span>京公网安备 11010802020633号</span>
          </p>
          <p>
            <span>地址：北京市海淀区上地东路35号颐泉汇大厦D座5层</span>
            <span>热线：400 650 7893</span>
            <span>电话/传真：010-82824490</span>
          </p>
        </div>
        <div class="safety clearfix">
            <a href="javascript:;"><img src="../assets/ym-footer/safe-360.png" /></a>
            <a href="javascript:;"><img src="../assets/ym-footer/safe-kexin.png" /></a>
            <a href="javascript:;"><img src="../assets/ym-footer/safe-aqlm.png" /></a>
        </div>
      </div>
      </div>
  </div>
</template>

<script>
  export default {
  }
</script>

<style scoped lang="less">
  .w1200 {
    width: 1200px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
  }

  .footer-bg {
    height: 240px;
    background-color: #f3f9ff;
/*    background: linear-gradient(to bottom, #c6dbed 0%,#f3f9ff 100%);*/
    background-image: url(../assets/ym-footer/ymDetailsfooter-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
  }
  .footer-about {
    margin-top: 30px;
    h5 {
      &:extend(.footer-links h5);
    }
    ul {
      width: 180px;
      float: left;
      h5 {
        padding-top: 35px;
        padding-bottom: 20px;
        color: #f29600;
        font-weight: bold;
        font-size: 18px;
      }
      li {
        &:extend(.footer-links p);
        line-height: 36px;
        a {
          font-size: 16px;
          color: white;
          &:extend(.footer-links p a);
        }
      }
    }
    .we {
      float: right;
      width: 520px;
      h5{
        font-size: 18px;
        padding-top: 35px;
        color: #f29600;
        font-weight: bold;
      }
      .icons {
        padding-top: 15px;
        padding-bottom: 8px;
        a {
          margin-right: 22px;
        }
      }
      .text {
        color: white;
        line-height: 28px;
        margin-right: 0;
        font-size: 16px;
      }
    }
  }

  .footer-copyright {
    height: 108px;
    background: #1a1a1a;
    .w1200 {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .copyright {
      color: #fff;
      font-size: 14px;
      line-height: 30px;
      p {
        display: flex;
        align-items: center;
      }
      span {
        margin-right: 10px;
      }
      img {
        margin-right: 3px;
      }
    }
    .safety a {
      float: left;
      margin-left: 12px;
      img {
        display: block;
      }
    }
  }

</style>
